<template>
  <div>
    <h1>
      {{ $store.state.name + '' }}
    </h1>
    <h2>{{ globalName }}</h2>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>

    <!-- <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table> -->
  </div>
</template>

<script lang="ts">
// import { ElLoading } from 'element-plus';
import { defineComponent, ref } from 'vue';
// 手动局部导入
// import { ElButton } from 'element-plus';
// import 'element-plus/theme-chalk/base.css';
// import 'element-plus/theme-chalk/el-button.css';

export default defineComponent({
  // components: {
  //   ElButton,
  // },
  setup() {
    // ElLoading.service({ fullscreen: true });

    const loading = ref(true);
    const tableData = [
      {
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
      },
      {
        date: '2016-05-04',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
      },
      {
        date: '2016-05-01',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
      },
    ];
    return {
      tableData,
      loading,
    };
  },
});
</script>

<style scoped></style>
